// lib/pages/test_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:cesi/model/coffee_model.dart';
import 'package:cesi/model/Coffee.dart'; // 导入你的 Coffee 对象

class TestPage extends StatelessWidget {
  // 将 StatelessWidget 作为 StatelessWidget，因为状态现在由 Model 管理
  const TestPage({super.key});
  @override
  Widget build(BuildContext context) {
    // 1. 在 build 方法中，通过 Provider.of<CoffeeModel>(context) 获取 Model 实例
    final coffeeModel = Provider.of<CoffeeModel>(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Provider 测试页面'),
        backgroundColor: Colors.blue,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 2. 按钮触发数据获取
            ElevatedButton.icon(
              onPressed: coffeeModel.isLoading
                  ? null // 如果正在加载，则禁用按钮
                  : () {
                      // 调用 Model 中的方法来获取数据
                      coffeeModel.fetchCoffees();
                    },
              icon: const Icon(Icons.cloud_download),
              label: Text(coffeeModel.isLoading ? '加载中...' : '获取咖啡列表'),
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(vertical: 16),
                textStyle: const TextStyle(fontSize: 16),
              ),
            ),
            const SizedBox(height: 30),
            // 3. 使用 Expanded 让结果显示区域占据剩余空间
            Expanded(child: _buildResultDisplay(coffeeModel)),
          ],
        ),
      ),
    );
  }

  // 4. 将结果显示逻辑提取到一个单独的方法中，接收 Model 作为参数
  Widget _buildResultDisplay(CoffeeModel model) {
    // 根据 Model 的不同状态，返回不同的 UI
    if (model.isLoading && model.coffees.isEmpty) {
      // 初始加载状态
      return const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
            SizedBox(height: 16),
            Text('正在请求中...', style: TextStyle(fontSize: 16)),
          ],
        ),
      );
    }
    if (model.error != null) {
      // 错误状态
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.error_outline, color: Colors.red, size: 48),
            const SizedBox(height: 16),
            Text(
              '请求失败',
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.red,
              ),
            ),
            const SizedBox(height: 8),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                model.error!,
                style: const TextStyle(color: Colors.grey),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      );
    }
    if (model.coffees.isNotEmpty) {
      // 成功状态
      return ListView.builder(
        // shrinkWrap 和 physics 对于在 Column 中的 ListView 是必须的
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: model.coffees.length,
        itemBuilder: (context, index) {
          final coffee = model.coffees[index];
          return ListTile(
            leading: Image.network(
              coffee.imagePath,
              width: 50,
              height: 50,
              fit: BoxFit.cover,
              errorBuilder: (context, error, stackTrace) {
                return const Icon(Icons.coffee, size: 40, color: Colors.grey);
              },
            ),
            title: Text(coffee.name),
            subtitle: Text('价格: ¥${coffee.price} | 评分: ${coffee.rating}'),
          );
        },
      );
    }
    // 默认状态（初始且未加载时）
    return const Center(
      child: Text(
        '请点击上方按钮开始测试。',
        style: TextStyle(fontSize: 16, color: Colors.grey),
        textAlign: TextAlign.center,
      ),
    );
  }
}
